/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-23 20:32:04
 * @LastEditTime: 2021-04-27 15:01:58
 * @LastEditors: 韩双双
 */
import react, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';

import useStore from '@/context/useStore';
import { ICategoryDetail } from '@/utils/interface/Homepage';
import styles from './fe.less';
import { useLocation } from 'umi'
import { timeAgo } from '@/utils/Time';

import ArticlesTag from '@/component/Articel/articles';
import Category from '@/component/Articel/category';
import Loding from '@/component/Articel/loding';
import Icon from '@/component/Articel/icon';

import { BookOutlined } from '@ant-design/icons';
import { Affix } from 'antd';



function fs() {
    let { article } = useStore()
    let location = useLocation()
    const [top, setTop] = useState(10);
    const [bottom, setBottom] = useState(10);

    // useEffect(() => {
    //     // console.log((location.state as { ID: string }).ID)
    //     article.getCategoryDetail((location.state as { ID: string }).ID)
    // }, [])

    // useEffect(() => {
    //     console.log(11)
    //     article.getCategoryDetail((location.state as { ID: string }).ID)
    // }, [])

    return (
        <div className={styles.box}>
            <div className={styles.left}>
                {
                    article.CategoryDetail && article.CategoryDetail.length &&
                    <div>
                        <div className={styles.handle}>
                            <p><BookOutlined style={{ fontSize: '40px', color: '#cccccc' }} /></p>
                            <p> <b>{article.CategoryDetail[0].category && article.CategoryDetail[0].category.label}</b> 分类文章</p>
                            <p>共搜索到 <b>{article.CategoryDetail&&article.CategoryDetail.length}</b> 篇</p>
                        </div>
                        <div>
                            {
                                article.CategoryDetail.length && article.CategoryDetail.map((item: ICategoryDetail) => {
                                    // console.log(item.title)
                                    return <div key={item.id} className={styles.dl}>
                                        <div className={styles.cover}>
                                            <img src={item.cover} alt="" />
                                        </div>
                                        <div className={styles.content}>
                                            <p className={styles.itemp}>{item.title}</p>
                                            <p>{item.summary}</p>
                                            <p>
                                                <span>{item.category && item.category.label + ' · '}</span>

                                                <span>{item.views + '次阅读'} </span>
                                                <span>{timeAgo(+ new Date(item.createAt)) + '前'}</span>
                                            </p>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                }
            </div>
            <div className={styles.right}>
                <Affix offsetBottom={bottom}>
                    <Loding></Loding>
                </Affix>
                <br />

                <Affix offsetTop={top}>
                    <div>
                        <Category></Category>
                        <ArticlesTag></ArticlesTag>
                        <Icon></Icon>
                    </div>
                </Affix>
            </div>
        </div>
    )
}

export default observer(fs)